<template>
  <view class="seckill_container" :class="mallId==='100'?'seckill2':'seckill1'" v-if="hasShow">
    <view class="floor_seckill_title">
      <view class="left">
        <image class="floor_type" :src="staticUrl()+'/new/activity_title1.png'"></image>
        <view class="countDown">
          <text class="text"></text>
          <text class="text">{{ count }}</text>
        </view>
      </view>
      <view class="more" @click="clickJumpInfo">
        <image :src="staticUrl()+'/new/seckill_more.png'"></image>
      </view>
    </view>

    <!-- 数据 -->
    <swiper autoplay :interval="3000" circular class="swiper">
      <swiper-item v-for="(item, index) in seckillList" :key="index" class="swiper-item">
        <view v-for="(i, ins) in item" :key="ins" class="item" @click="clickJumpInfo">
          <image v-if="i.inform" mode="aspectFit" :src="i.inform" class="img inform_announcement">
          </image>
          <!-- <image class="img" :class="i.quantity ?'':'sellOut_container-img'"
            :src="i.original ? i.original : staticUrl() + '/home/defaultImg.png'" mode="aspectFit" /> -->
          <ImageCache class="img" :class="i.quantity ?'':'sellOut_container-img'"
            :src="i.original ? i.original : staticUrl() + '/home/defaultImg.png'"
            :mode="'aspectFit'" />
          <view class="goodsName">
            <span class="ephedrine" v-if="i.ephedrine">含特</span>
            <span class="goods_name singleRowEllipsis"> {{ i.goodsName }} </span>
          </view>
          <!-- <text class="seckillType">{{i.promotionMethods[0].name}}</text> -->
          <!-- <view v-if="i.promotionMethods.length">
            <span class="ephedrine" v-if="i.ephedrine">含特</span>
            <text v-for="(n, m) in i.promotionMethods" :key="m"
              :class="n.promotionType === 'COUPON' ? 'voucher' : 'seckillType'">
              {{ n.promotionType === 'COUPON' ? '券' : n.name }}
            </text>
          </view> -->
          <view v-if="hasToken() && i.promotionPrice">
            <view class="promotionPrice" v-if="i.promotionPrice">
              <text class="coinSymbol">￥</text>
              <text class="price">{{ i.promotionPrice }}</text>
              <text class="packing">/{{ i.goodsUnit }}</text>
            </view>
            <view class="originalPrice">
              <text class="price" v-if="i.originalPrice">￥{{ i.originalPrice }}</text>
            </view>
          </view>
          <text class="prices singleRowEllipsis" v-if="hasToken() && !i.promotionPrice">
            <text class="login_see">资质审核可见</text>
          </text>
          <view class="prices" v-if="!hasToken()">
            <text class="login_see">登录可见</text>
          </view>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
import { activityData } from "@/api/home/index"

export default {
  props: {
    data: {
      type: Object,
      default: () => { }
    }
  },
  data () {
    return {
      timeId: '',
      count: '',
      seckillList: [],
      hasShow: true,
      mallId: '0',
    }
  },
  created () {
    if (this.mallId !== uni.getStorageSync('mallId')) {
      clearInterval(this.timeId)
    }
    this.mallId = uni.getStorageSync('mallId') || "0"
    this.getList()
  },
  destroyed () {
    clearInterval(this.timeId)
  },
  methods: {
    // 跳转 详情
    clickJumpInfo () {
      uni.navigateTo({
        url: `/subpackage/activity/activity?promotionType=${this.data.promotion.promotionType}&title=${this.data.promotion.title}`
      })
    },
    // 获取数据 组装数组
    getList () {
      activityData({
        path: this.data.promotion.promotionGoodsPath,
        params: { pageNumber: 1, pageSize: 9 }
      }).then(res => {
        let goods = res.data.records
        if (res.code === 200) {
          if (!goods.length) {
            this.hasShow = false
            return
          }
          this.countDown(this.data.promotion.endTime)
          let num = Math.ceil(goods.length / 3)
          for (let i = 0; i < num; i++) {
            this.$set(this.seckillList, i, goods.slice(i * 3, i * 3 + 3))
          }
        }
      })

    },
    // 倒计时
    countDown (val) {
      this.timeId = setInterval(() => {
        let ts = val - parseInt(new Date().getTime() / 1000)
        let d = parseInt(ts / 60 / 60 / 24)
        d = d < 10 ? '0' + d : d
        let h = parseInt(ts / 60 / 60 % 24)
        h = h < 10 ? '0' + h : h
        let m = parseInt(ts / 60 % 60)
        m = m < 10 ? '0' + m : m
        let s = parseInt(ts % 60)
        s = s < 10 ? '0' + s : s
        if (s === '0-1') {
          clearInterval(this.timeId)
          this.count = '本轮已结束'
        } else {
          this.count = `${d}天${h}时${m}分${s}秒`
        }
      }, 1000)
    },
  },
}
</script>

<style lang="scss" scoped>
.seckill1 {
  background-image: url("https://www.xdyy100.com/wholesale/files/mp/static/new/floor_seckill1.png");
}
.seckill2 {
  background-image: url("https://www.xdyy100.com/wholesale/files/mp/static/new/floor_seckill2.png");
}

.seckill_container {
  background-repeat: no-repeat;
  background-size: 100%;
  width: 702rpx;
  height: 370rpx;
  .floor_seckill_title {
    margin: 0 24rpx 0 29rpx;
    padding-top: 27rpx;
    display: flex;
    justify-content: space-between;
    .left {
      display: flex;
      align-items: center;
    }
    .floor_type {
      width: 143.42rpx;
      height: 29.1rpx;
    }
    .countDown {
      display: inline-block;
      min-width: 294rpx;
      height: 30rpx;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      border: 1rpx solid #ef231b;
      overflow: hidden;
      margin-left: 15rpx;
      position: relative;
      .text {
        font-size: 22rpx;
      }
      .text:nth-child(1) {
        display: inline-block;
        width: 74rpx;
        height: 0;
        border-top: 40rpx solid #ef231b;
        border-right: 12rpx solid transparent;
      }
      .text:nth-child(1)::after {
        content: "距结束";
        color: #fff;
        position: absolute;
        top: 0;
        left: 10rpx;
        font-size: 22rpx;
      }

      .text:nth-child(2) {
        position: absolute;
        color: #ef231b;
      }
    }

    .more {
      width: 104rpx;
      height: 44rpx;
      image {
        width: 100%;
        height: 100%;
      }
    }
  }
}
.swiper {
  height: 261rpx;
  margin: 0 29rpx;
  margin-top: 20rpx;
  .swiper-item {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    .item {
      width: 204rpx;
      height: 261rpx;
      background: #ffffff;
      // box-shadow: 0rpx 4rpx 2rpx 0rpx rgba(255, 155, 47, 0.5);
      // box-shadow: 4rpx 4rpx 2rpx 0rpx #000;
      border-radius: 8rpx 8rpx 8rpx 8rpx;
      display: flex;
      flex-flow: column nowrap;
      margin-right: 16rpx;
      .img {
        width: 136rpx;
        height: 112rpx;
        margin: 28rpx 34rpx 0;
      }
      .goodsName {
        margin: 0 16rpx;
        display: flex;
        align-items: center;
        .goods_name {
          font-size: 24rpx;
        }
      }
      .promotionPrice {
        margin: 0 16rpx;
        color: #ef231b;
        .coinSymbol {
          font-size: 24rpx;
        }
        .price {
          font-size: 32rpx;
          font-weight: bold;
        }
        .packing {
          font-size: 20rpx;
          color: #999999;
        }
      }
      .originalPrice {
        margin: 0 16rpx;
        font-size: 20rpx;
        color: #999999;
        text-decoration-line: line-through;
      }
      .prices {
        margin: 6rpx 16rpx;
        .login_see {
          font-size: 28rpx;
          color: #ef231b;
        }
      }
      .progress {
        height: 6rpx;
        width: 100%;
        background-color: #fedad8;
        margin-bottom: 8rpx;
        .current {
          height: 6rpx;
          background-color: #ef231b;
          max-width: 100%;
        }
      }
      .buyed {
        font-size: 20rpx;
        opacity: 0.6;
      }
      .rushToBuy {
        font-size: 18rpx;
        border-radius: 14rpx;
        width: 60rpx;
        height: 34rpx;
        line-height: 34rpx;
        color: #fff;
        text-align: center;
        background: #ef231b;
        margin-left: 68%;
      }
    }
  }
}
</style>


